<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>M3U8 Video Detector - 图标生成器</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: #f5f5f5;
    }
    
    h1 {
      color: #4285f4;
      text-align: center;
    }
    
    .container {
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .canvas-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      margin: 30px 0;
    }
    
    .icon-wrapper {
      text-align: center;
    }
    
    canvas {
      border: 1px solid #ddd;
      background-color: white;
      margin-bottom: 10px;
    }
    
    button {
      background-color: #4285f4;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      margin-top: 5px;
    }
    
    button:hover {
      background-color: #3367d6;
    }
    
    .instructions {
      background-color: #e8f0fe;
      padding: 15px;
      border-left: 4px solid #4285f4;
      margin: 20px 0;
    }
    
    .color-picker {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-bottom: 20px;
    }
    
    .color-option {
      display: flex;
      align-items: center;
    }
    
    .color-option label {
      margin-right: 10px;
    }
    
    input[type="color"] {
      width: 40px;
      height: 40px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>M3U8 Video Detector 图标生成器</h1>
    
    <div class="instructions">
      <p>此工具可以生成M3U8 Video Detector扩展程序所需的图标。生成后，点击"下载"按钮保存每个尺寸的图标，并将它们放在扩展程序的icons目录中。</p>
      <p>您可以自定义图标的主色和背景色。</p>
    </div>
    
    <div class="color-picker">
      <div class="color-option">
        <label for="mainColor">主色：</label>
        <input type="color" id="mainColor" value="#4285f4">
      </div>
      <div class="color-option">
        <label for="bgColor">背景色：</label>
        <input type="color" id="bgColor" value="#ffffff">
      </div>
      <button id="regenerateBtn">重新生成</button>
    </div>
    
    <div class="canvas-container">
      <div class="icon-wrapper">
        <canvas id="icon16" width="16" height="16"></canvas>
        <div>16x16</div>
        <button class="download-btn" data-size="16">下载</button>
      </div>
      
      <div class="icon-wrapper">
        <canvas id="icon32" width="32" height="32"></canvas>
        <div>32x32</div>
        <button class="download-btn" data-size="32">下载</button>
      </div>
      
      <div class="icon-wrapper">
        <canvas id="icon48" width="48" height="48"></canvas>
        <div>48x48</div>
        <button class="download-btn" data-size="48">下载</button>
      </div>
      
      <div class="icon-wrapper">
        <canvas id="icon128" width="128" height="128"></canvas>
        <div>128x128</div>
        <button class="download-btn" data-size="128">下载</button>
      </div>
    </div>
  </div>
  
  <script>
    // 获取DOM元素
    const mainColorPicker = document.getElementById('mainColor');
    const bgColorPicker = document.getElementById('bgColor');
    const regenerateBtn = document.getElementById('regenerateBtn');
    const downloadBtns = document.querySelectorAll('.download-btn');
    
    // 初始颜色
    let mainColor = mainColorPicker.value;
    let bgColor = bgColorPicker.value;
    
    // 绘制图标
    function drawIcon(canvas, size) {
      const ctx = canvas.getContext('2d');
      const padding = Math.max(1, Math.floor(size * 0.1));
      
      // 清除画布
      ctx.clearRect(0, 0, size, size);
      
      // 绘制背景
      ctx.fillStyle = bgColor;
      ctx.fillRect(0, 0, size, size);
      
      // 绘制M3U8图标
      ctx.fillStyle = mainColor;
      
      // 绘制M字形
      const lineWidth = Math.max(1, Math.floor(size * 0.1));
      const startX = padding;
      const endX = size - padding;
      const topY = padding;
      const bottomY = size - padding;
      const middleY = size / 2;
      
      // 绘制M形状
      ctx.beginPath();
      ctx.moveTo(startX, bottomY);
      ctx.lineTo(startX + lineWidth, bottomY);
      ctx.lineTo(startX + lineWidth, topY + lineWidth);
      ctx.lineTo(size / 2 - lineWidth / 2, middleY);
      ctx.lineTo(size / 2 + lineWidth / 2, middleY);
      ctx.lineTo(endX - lineWidth, topY + lineWidth);
      ctx.lineTo(endX - lineWidth, bottomY);
      ctx.lineTo(endX, bottomY);
      ctx.lineTo(endX, topY);
      ctx.lineTo(size / 2, middleY - lineWidth);
      ctx.lineTo(startX, topY);
      ctx.closePath();
      ctx.fill();
      
      // 绘制3条水平线（代表播放列表）
      const lineHeight = Math.max(1, Math.floor(size * 0.06));
      const lineGap = Math.max(1, Math.floor(size * 0.08));
      const lineStartY = middleY + lineWidth;
      
      for (let i = 0; i < 3; i++) {
        const y = lineStartY + i * (lineHeight + lineGap);
        if (y + lineHeight <= bottomY) {
          ctx.fillRect(startX, y, endX - startX, lineHeight);
        }
      }
    }
    
    // 生成所有图标
    function generateAllIcons() {
      const sizes = [16, 32, 48, 128];
      sizes.forEach(size => {
        const canvas = document.getElementById(`icon${size}`);
        drawIcon(canvas, size);
      });
    }
    
    // 下载图标
    function downloadIcon(size) {
      const canvas = document.getElementById(`icon${size}`);
      const link = document.createElement('a');
      link.download = `icon${size}.png`;
      link.href = canvas.toDataURL('image/png');
      link.click();
    }
    
    // 事件监听器
    mainColorPicker.addEventListener('change', function() {
      mainColor = this.value;
      generateAllIcons();
    });
    
    bgColorPicker.addEventListener('change', function() {
      bgColor = this.value;
      generateAllIcons();
    });
    
    regenerateBtn.addEventListener('click', generateAllIcons);
    
    downloadBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        const size = this.getAttribute('data-size');
        downloadIcon(size);
      });
    });
    
    // 初始生成图标
    generateAllIcons();
  </script>
</body>
</html>